<template>
	<div class="page-container">
		<el-card class="page-card" :body-style="{ height: '100vh', padding: '32px !important' }">
			<div class="flex flex-col h-full">
				<div v-loading="loading" class="advertising flex-1">
					<div class="advertising__item">
						<div class="pt-[124px] text-center pb-[70px] cursor-pointer">
							<el-upload ref="uploadRef" :before-upload="beforeUpload" :action="uploadImgUrl" :headers="headers" :limit="1" :show-file-list="false" :on-success="onSuccessUpload">
								<svg-icon icon-class="add" size="48px" color="#4C59C6"></svg-icon>
							</el-upload>
						</div>
						<div class="flex flex-col items-center">
							<div class="flex items-center justify-center mb-[8px]">
								<span class="text-[14px] text-[#4C59C6] mr-[6px]">新增开机广告</span>
								<el-tooltip class="item" popper-class="tips" effect="dark" placement="top">
									<div slot="content">开机广告海报尺寸<br />750*1624</div>
									<svg-icon icon-class="wenhao" color="#4C59C6" size="14px"></svg-icon>
								</el-tooltip>
							</div>
							<div class="text-[14px] text-[#4C59C6]">（{{ data.length }}/1）</div>
						</div>
					</div>
					<div v-for="(item, index) in data" :key="index" class="advertising__item advertising__item__image" :style="{ background: `url(${item.shareUrl}) no-repeat` }">
						<div class="hover">
							<div class="flex items-center justify-center text-white text-[12px]">
								<el-upload ref="images" :action="uploadImgUrl" :headers="headers" :limit="1" :show-file-list="false" :on-success="onUpdateUpload">
									<span class="mr-[40px]" @click="id = item.id">修改</span>
								</el-upload>
								<span @click="handleRemove(item.id)">删除</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script>
import { getToken } from '@/utils/auth';

export default {
	name: 'Boot',
	data() {
		return {
			uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload',
			headers: {
				Authorization: 'Bearer ' + getToken(),
			},
			queryParams: {
				pageNum: 1,
				pageSize: 1,
				type: 2,
			},
			data: [],
			loading: false,
			total: 0,
			fileUrl: null,
			id: null,
		};
	},
	created() {
		this.getList();
	},
	methods: {
		//列表
		getList() {
			this.loading = true;
			this.$request
				.post('/system/poster/list', this.queryParams)
				.then((response) => {
					this.data = response.data;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		onSuccessUpload(res) {
			if (res.data) {
				this.fileUrl = res.data.url;
				this.createBanner();
			} else {
				this.$message.error(res.msg);
			}
		},
		beforeUpload() {
			return this.data.length < 1;
		},
		//编辑
		onUpdateUpload(res) {
			if (res.data) {
				this.$request
					.post('/system/poster/editUp', {
						type: 2,
						shareUrl: res.data.url,
						id: this.id,
					})
					.then(() => {
						this.$message.success('编辑成功');
						this.$refs.images &&
							this.$refs.images.forEach((item) => {
								item.clearFiles();
							});
						this.id = null;
						this.getList();
					});
			} else {
				this.$message.error(res.msg);
			}
		},
		//创建
		createBanner() {
			this.$request
				.post('/system/poster/addUp', {
					type: 2,
					shareUrl: this.fileUrl,
				})
				.then(() => {
					this.$message.success('上传成功');
					this.$refs.uploadRef.clearFiles();
					this.fileUrl = null;
					this.getList();
				});
		},
		//删除
		handleRemove(id) {
			this.$confirm('确认删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				this.$request
					.post('system/poster/removeUp', {
						id: [id],
					})
					.then(() => {
						this.$message.success('删除成功');
						this.getList();
					});
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.advertising {
	@apply flex;
	&__item {
		width: 180px;
		height: 320px;
		background: #f3f4f7;
		border: 1px dashed #4c59c6;
		background: rgba(76, 89, 198, 0.05);

		border-radius: 12px;
		padding: 0 37px;
		margin-right: 20px;
		background-size: 100% 100% !important;
		&__image {
			cursor: pointer;
			position: relative;
			border: none;
			&:hover {
				.hover {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.hover {
				position: absolute;
				height: 100%;
				left: 0;
				border-radius: 12px;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				display: none;
			}
		}
	}
}
</style>
